<template>
  <div>
    <NormalForm pageTitle="KOL分析" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset" @selectDateType="selectDateType"></NormalForm>
    <div class="g-card">
      <div class="right-btn">
        <el-button type="primary" plain size="mini" @click="visible = true"
          v-has-permi="['admin:kol:updateWeight']">调整分值权重</el-button>
      </div>
      <div class="info">
        <div>
          <div class="block">
            <div class="block-title">
              <div class="active"></div>裂变力：{{ codelist.num1 }}
            </div>
            <div class="block-info">侧重于量化好友的裂变能力</div>
            <el-tag class="block-tag1">转发好友指数</el-tag>
          </div>
          <div class="block">
            <div class="block-title">
              <div class="active"></div>价值性：{{ codelist.num2 }}
            </div>
            <div class="block-info">侧重于量化获取好友有效联系方式的能力</div>
            <el-tag class="block-tag2">好友转潜客指数</el-tag>
          </div>
        </div>
        <el-image :src="src"></el-image>
        <div>
          <div class="block">
            <div class="block-title">
              <div class="active"></div>积极性：{{ codelist.num3 }}
            </div>
            <div class="block-info">侧重于量化转发好友内容的积极性</div>
            <el-tag class="block-tag3">转发活动指数</el-tag>
          </div>
          <div class="block">
            <div class="block-title">
              <div class="active"></div>影响力：{{ codelist.num4 }}
            </div>
            <div class="block-info">侧重于量化转发内容后好友响应的能力</div>
            <el-tag class="block-tag4">转发活动响应指数</el-tag>
          </div>
        </div>
      </div>
      <div style="padding: 40px 20px 20px 20px;">
        <el-table v-loading="loading" :data="tableList" width="100%" height="415">
          <el-table-column type="index" width="55" align="center" label="排名" />
          <el-table-column label="KOL客户" align="center" prop="kolName" />
          <el-table-column label="裂变力(分值)" align="center" prop="fissionScore" />
          <el-table-column label="积极性(分值)" align="center" prop="activeScore" />
          <el-table-column label="影响力(分值)" align="center" prop="effectScore" />
          <el-table-column label="价值性(分值)" align="center" prop="valueScore" />
          <el-table-column label="综合分值(分值)" align="center" prop="compositeScore" />
          <el-table-column label="管理好友" align="center" fixed="right">
            <template slot-scope="{ row }">
              <div class="option-span">
                <span @click="detailRoute(row)">详情</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
    <el-dialog title="调整分值权重" :visible.sync="visible" width="464px">
      <el-form ref="form" :model="form" :rules="rules" size="medium" :inline="true" label-width="92px" class="form">
        <el-form-item label="裂变力" prop="num1">
          <el-input placeholder="请输入比例值" v-model="form.num1" type="number">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="价值性" prop="num2">
          <el-input placeholder="请输入比例值" v-model="form.num2" type="number">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="积极性" prop="num3">
          <el-input placeholder="请输入比例值" v-model="form.num3" type="number">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="影响力" prop="num4">
          <el-input placeholder="请输入比例值" v-model="form.num4" type="number">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/common'
import { kolList, updateWeight } from '@/api/KOL'
import { getAllWeUser } from "@/api/customer/customerManage";

export default {
  name: 'KOLAnalysis',
  data() {
    return {
      queryForm: {
        dateType: '0',
        dateRange: null,
        deptIdList: null,
        createCode: null,
        insuranceType: null,
        pageNum: 1,
        pageSize: 20
      },
      formList: [
        {
          label: '渠道',
          value: '',
          prop: 'insuranceType',
          type: 'SELECT',
          emunName: 'insuranceList',
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptIdList',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'createCode',
          type: 'SELECT',
          emunName: 'creatorList'
        },
        {
          label: '',
          value: '',
          prop: 'dateType',
          type: 'SPECIAL_SELECT',
          emunName: 'dateTypeList'
        },
        {
          label: '',
          value: null,
          prop: 'dateRange',
          type: 'SPECIAL_DATE',
          emunName: '',
          aboutProp: 'dateType',
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
        },
      ],
      enumOpt: {
        insuranceList: [],
        creatorList: [],
        dateTypeList: [
          { dictLabel: '自然日', dictValue: '0' },
          { dictLabel: '自然周', dictValue: '1' },
          { dictLabel: '自然月', dictValue: '2' },
          { dictLabel: '自然年', dictValue: '3' },
        ],
      },
      src: require('@/assets/image/kol.png'),
      tableList: [],
      loading: false,
      total: 0,
      //裂变值百分比
      codelist: {
        num1: '',
        num2: '',
        num3: '',
        num4: '',
      },
      visible: false,//弹窗显隐
      form: {
        num1: '',
        num2: '',
        num3: '',
        num4: '',
      },
      rules: {
        num1: [{ requested: true, message: '不能为空', trigger: 'blur' }],
        num2: [{ requested: true, message: '不能为空', trigger: 'blur' }],
        num3: [{ requested: true, message: '不能为空', trigger: 'blur' }],
        num4: [{ requested: true, message: '不能为空', trigger: 'blur' }],
      },
    }
  },
  watch: {
    "queryForm.deptIdList": {
      handler() {
        if (this.queryForm.deptIdList) this.getAllWeUserInfo();
      },
    },
  },
  created() {
    this.getLabelList();
    this.selectDateType();
    this.handleQuery();
  },
  mounted(){
    this.getCodelist()
  },
  methods: {
    getLabelList() {
      // 渠道
      this.getDicts("insurance_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.insuranceList = res.data
        }
      });
    },
    getAllWeUserInfo() {
      this.enumOpt.creatorList = []
      const params = {
        deptId: this.queryForm.deptIdList,
        userName: "",
      };
      getAllWeUser(params).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            this.enumOpt.creatorList.push({
              dictLabel: item.userName,
              dictValue: item.userId
            })
          })
        }
      })
    },
    selectDateType() {
      let startTime = parseTime(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), "{y}-{m}-{d}");
      let endTime = parseTime(new Date(new Date().getTime()), "{y}-{m}-{d}");
      if (this.queryForm.dateType === "0") {
        this.queryForm.dateRange = [startTime, endTime];
      } else {
        this.queryForm.dateRange = startTime
      }
    },
    //调整分值权重
    handelConfirm() {
      let param = [
        {
          "dictCode": "6613",
          "dictLabel": "裂变力",
          "dictType": "kol_weight_type",
          "dictValue": this.form.num1,
        },
        {
          "dictCode": "6614",
          "dictLabel": "价值性",
          "dictType": "kol_weight_type",
          "dictValue": this.form.num2,
        },
        {
          "dictCode": "6615",
          "dictLabel": "积极性",
          "dictType": "kol_weight_type",
          "dictValue": this.form.num3,
        },
        {
          "dictCode": "6616",
          "dictLabel": "影响力",
          "dictType": "kol_weight_type",
          "dictValue": this.form.num4,
        }
      ];
      updateWeight(param).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功');
          this.visible = false;
          this.getCodelist();
        } else {
          this.visible = true;
        }
      }).catch(() => { })
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getKolList()
    },
    //列表查询
    getKolList() {
      // this.loading = true;
      // let obj = this.reassembly();
      // const params = {
      //   dateType: obj.dateType,
      //   startDate: obj.startTime,
      //   endDate: obj.endTime,
      //   insuranceType: this.queryForm.insuranceType,
      //   deptIdList: this.queryForm.deptIdList,
      //   createCode: this.queryForm.createCode,
      //   pageNum: this.queryForm.pageNum,
      //   pageSize: this.queryForm.pageSize,
      // }
      // kolList(params).then(res => {
      //   this.total = res.data.total || 0;
      //   this.tableList = res.data.rows || [];
      //   this.loading = false;
      // }).catch(() => { })
      this.total = 2
      this.tableList = [
        { kolName: '张艳丽',fissionScore: '2', activeScore: '2', effectScore: '1', valueScore: '1', compositeScore: '1.4', sid: '1783679462774734849' },
        { kolName: '徐海娟',fissionScore: '1', activeScore: '1', effectScore: '0', valueScore: '0', compositeScore: '0.4', sid: '1783679465660416002' },
      ]
    },
    // 组装startTime和endTime入参
    reassembly() {
      let startTime = null, endTime = null, dateType = null;
      let selectDate = this.queryForm.dateRange;
      if (selectDate) {
        if (this.queryForm.dateType === "0") {
          dateType = 'DAY'; // 日
          startTime = selectDate[0]
          endTime = selectDate[1]
        } else if (this.queryForm.dateType === "1") {
          dateType = 'DAY'; // 周
          startTime = parseTime(new Date(new Date(selectDate).getTime() - 24 * 60 * 60 * 1000), "{y}-{m}-{d}")
          endTime = parseTime(new Date(new Date(selectDate).getTime() + 5 * 24 * 60 * 60 * 1000), "{y}-{m}-{d}")
        } else if (this.queryForm.dateType === "2") {
          dateType = 'MONTH'; // 月
          startTime = selectDate
          const temp = selectDate.split("-")
          let str = +temp[1] + 1
          temp[1] = temp[1] < 9 ? '0' + str : str;
          if (temp[1] === 13) {
            temp[1] = "01"
            temp[0] = +temp[0] + 1
          }
          endTime = temp.join("-")
        } else if (this.queryForm.dateType === "3") {
          dateType = 'YEAR'; // 年
          startTime = selectDate
          const temp = selectDate.split("-")
          temp[0] = +temp[0] + 1
          endTime = temp.join("-")
        }
      }
      return { startTime, endTime, dateType }
    },
    //查询框重置
    handleReset() {
      let startTime = parseTime(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), "{y}-{m}-{d}");
      let endTime = parseTime(new Date(new Date().getTime()), "{y}-{m}-{d}");
      this.enumOpt.creatorList = []
      this.queryForm = {
        dateType: '0',
        dateRange: [startTime, endTime],
        deptId: null,
        createCode: null,
        insuranceType: null,
      }
      this.getKolList();
    },
    // 翻页
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getKolList()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getKolList()
    },

    //详情跳转
    detailRoute(rows) {
      this.$router.push({
        name: "CustomerDetails",
        query: {
          sid: rows.sid,
        },
      });
    },
    getCodelist() {
      this.getDicts("kol_weight_type").then((response) => {
        let arr = response.data;
        arr.forEach((item) => {
          if (item.dictCode == 6613) {
            this.codelist.num1 = item.dictValue + '%'
          }
          if (item.dictCode == 6614) {
            this.codelist.num2 = item.dictValue + '%'
          }
          if (item.dictCode == 6615) {
            this.codelist.num3 = item.dictValue + '%'
          }
          if (item.dictCode == 6616) {
            this.codelist.num4 = item.dictValue + '%'
          }
        })
      });
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.info {
  display: flex;
  justify-content: space-evenly;
  height: 300px;

  div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

.block {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  .block-title {
    height: 25px;
    font-size: 18px;
    font-weight: 600;
    color: #082aff;
    line-height: 25px;
    display: inline;
    position: relative;

    .active {
      height: 8px;
      width: 8px;
      border-radius: 50%;
      border: 4px solid #082aff;
      display: inline-block;
      position: absolute;
      top: 40%;
      left: -8%;
    }
  }

  .block-info {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #2A2A2A;
    line-height: 20px;
    margin: 8px 0;
  }

  .block-tag1 {
    height: 20px;
    font-size: 13px;
    color: #FF5252 !important;
    line-height: 20px;
    background-color: #ffeeeb !important;
    border-color: #ffeeeb !important;
    width: 92px;
  }

  .block-tag2 {
    height: 20px;
    font-size: 13px;
    color: #A187F0 !important;
    line-height: 20px;
    background-color: #F1ECFF !important;
    border-color: #F1ECFF !important;
    width: 105px;
  }

  .block-tag3 {
    height: 20px;
    font-size: 13px;
    color: #FFAD3A !important;
    line-height: 20px;
    background-color: #FFF9EC !important;
    border-color: #FFF9EC !important;
    width: 92px;
  }

  .block-tag4 {
    height: 20px;
    font-size: 13px;
    color: #28CE2E !important;
    line-height: 20px;
    background-color: #E8F8E8 !important;
    border-color: #E8F8E8 !important;
    width: 120px;
  }
}

::v-deep.el-table {
  font-family: PingFangSC-Regular, PingFang SC;
}
</style>
